<script>
import UserApi from "../api/user";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    async login() {
      try {
        let api = new UserApi();
        let res = await api.login({ email: this.form.username, password: this.form.password });
        localStorage.setItem("auth", JSON.stringify(res));
        this.$router.replace("/");
        console.log(res);
      } catch {
        // eslint-disable-next-line no-undef
        ElMessage({
          showClose: true,
          message: "登录认证失败",
          type: "warning"
        });
      }
    }
  }
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="8" :offset="8">
            <div class="login">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <h2>学生信息管理系统后台登录</h2>
                  </div>
                </template>
                <el-form :model="form">
                  <el-form-item>
                    <el-input v-model="form.username">
                      <template #prefix>
                        <el-icon :size="24"><i-ep-user /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-model="form.password" type="password" show-password>
                      <template #prefix>
                        <el-icon :size="24"><i-ep-lock /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="login-button" type="primary" @click="login">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  background-image: linear-gradient(135deg, #97abff 10%, #123597 100%);
}

.login {
  flex-grow: 1;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.el-card {
  flex: 1 1 auto;
  border-radius: 16px;
}

.card-header {
  text-align: center;
}

.login-button {
  width: 100%;
}
</style>
